<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<title>H5小游戏100例: 消除星星</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />
	<link href="css/popstar.css" rel="stylesheet">
	
</head>

<body>
	<div class="wrapper">
		<canvas class="popstar"></canvas>
		
		<!-- 用户界面 -->
		<div class="popstar_menu" id="menu">
			<div class="popstar_high_score" id="highScore"></div>
			<div class="popstar_high_score" id="user"></div>
			<a class="popstar_btn" href="javascript:;" id="newGame">新 游 戏</a>
			<a class="popstar_btn disabled" href="javascript:;" id="resumeGame">继续游戏</a>
			<!-- <a class="popstar_btn" href="https://zhuanlan.zhihu.com/snsgame?group_id=909745245186072576" target="_blank">关注我们</a> -->
			<!-- <a class="popstar_btn" href="https://aotu.io/" target="_blank">凹凸官网</a> -->
		</div>
		<!-- 暂停时的广告 -->
		<div class="popstar_ad" id="popstarAd">
			<div class="popstar_ad_c">
				<div class="popstar_ad_titel">道具列表</div>
				<!-- 平台充值 -->
				<div id='container'></div>
				<!-- 道具列表 -->
				<div id='pList' class="md-list">
					<ul>
						<li>
							<img src="/images/dj-eb8e3.png">
							<em>大锤子 <span style="color: #FF9A30">300币</span></em>
							<p>凶恶的灰太狼把羊村的村民惹急了！</p>
							<a class="btn" href="javascript:;" name='1'>购买</a>
						</li>
						<li>
							<img src="/images/dj-eb8e3.png">
							<em>超级锤子 <span style="color: #FF9A30">312币</span></em>
							<p>凶恶的灰太狼把羊村的村民惹急了！</p>
							<a class="btn" href="javascript:;" name='2'>购买</a>
						</li>
						<li>
							<img src="/images/dj-eb8e3.png">
							<em>砍大锤 <span style="color: #FF9A30">30币</span></em>
							<p>凶恶的灰太狼把羊村的村民惹急了！</p>
							<a class="btn" href="javascript:;" name='3'>购买</a>
						</li>
						<li>
							<img src="/images/dj-eb8e3.png">
							<em>小锤 <span style="color: #FF9A30">200币</span></em>
							<p>凶恶的灰太狼把羊村的村民惹急了！</p>
							<a class="btn" name='4'>购买</a>
						</li>
						<li>
							<img src="/images/dj-eb8e3.png">
							<em>西安锤 <span style="color: #FF9A30">100币</span></em>
							<p>凶恶的灰太狼把羊村的村民惹急了！</p>
							<a class="btn" href="javascript:;" name='5'>购买</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="popstar_ad_close" id="popstarAdClose"></div>
		</div>
	</div>
</body>

<script type="text/javascript">
	PIXI.utils.skipHello();

	// 用户界面不属于游戏部分，直接在这里实现
	var record;

	// 初始化用户界面
	var initUI = function () {
		// 获取 localStorage 信息
		record = JSON.parse(localStorage.getItem("popstar-record")) || {
			total: 0,
			level: 0,
			highScore: 0
		}
		userData = JSON.parse(localStorage.getItem("user"));
		if (userData) {
			userName = userData['loginId'];
			user.innerHTML = "用户名：" + userName;
		}


		highScore.innerHTML = "最高分：" + record.highScore;
		resumeGame.className = record.level > 0 ? "popstar_btn" : "popstar_btn disabled";
	}

	initUI();

	// 初始化游戏 
	var popstar = new Popstar({
		view: document.querySelector(".popstar"),
		// 当前总分数
		total: record.total
	});

	// 新游戏 
	newGame.addEventListener("ontouchstart" in document ? "touchend" : "click", function () {
		// 记录分数置 0
		record.total = record.level = 0;
		// 记录到 localStorage
		localStorage.setItem("popstar-record", JSON.stringify(record));
		menu.className = "popstar_menu hide";
		setTimeout(function () {
			popstar.enter(0);
		}, 300);
	});

	//去购买
	popstarAd.addEventListener("ontouchstart" in document ? "touchend" : "click", function (e) {
		let d = {
			amount: 100,
			did: 123
		}
		switch (e.target.name) {
			case '1':
				d.amount = 300;
				pList.style.display = "none";
				popstar.tobuy(d);
				break;
			case '2':
				d.amount = 312;
				pList.style.display = "none";
				popstar.tobuy(d);
				break;
			case '3':
				d.amount = 30;
				pList.style.display = "none";
				popstar.tobuy(d);
				break;
			case '4':
				d.amount = 200;
				pList.style.display = "none";
				popstar.tobuy(d);
				break;
			case '5':
				d.amount = 100;
				pList.style.display = "none";
				popstar.tobuy(d);
				break;
		}
	});


	// 关闭广告
	popstarAdClose.addEventListener("ontouchstart" in document ? "touchend" : "click", function () {
		popstar.resume();
		container.innerHTML='';
		popstarAd.style.display = "none";
	});
	// 支付
	// buy.addEventListener("ontouchstart" in document ? "touchend" : "click", function() { 
	// 	alert('lee')
	// }); 

	// 用户按下暂停按钮
	popstar.event.on("pause", function () {
		popstar.pause();
		
		pList.style.display = "block";
		popstarAd.style.display = "block";
	});

	// 用户按下恢复按钮
	popstar.event.on("resume", function () {
		popstar.resume();
		popstarAd.style.display = "none";
	});

	// 通关
	popstar.event.on("pass", function () {
		// 记录当前的得分 
		record.total = popstar.total;
		// 记录最高分
		record.highScore = Math.max(record.highScore, record.total);
		// 下一关
		popstar.next();
		// 记录最新关卡 
		record.level = popstar.level;
		// 记录到 localStorage
		localStorage.setItem("popstar-record", JSON.stringify(record));
	});

	// 游戏结束
	popstar.event.on("gameover", function () {
		// 把关卡信息重置为 0
		record.level = 0;
		// 记录最高分
		record.highScore = Math.max(record.highScore, popstar.total);
		// 记录到 localStorage
		localStorage.setItem("popstar-record", JSON.stringify(record));
		alert("游戏结束");
		popstar.destroy();
		menu.className = "popstar_menu";
		// 重置信息
		initUI();
	});
</script>

</html>